<script lang="ts" setup>
import { ref } from "vue";
import { List, Calendar, ArrowDown } from "@element-plus/icons-vue";

// 定义属性
defineProps({
    totalCount: {
        type: Number,
        default: 0,
    },
});

// 视图模式和排序
const viewMode = ref("list");
const sortType = ref("latest");

// 排序选项
const sortOptions = {
    latest: "最新发布",
    time: "活动时间",
    hot: "热门程度",
};

// 定义事件
const emit = defineEmits(["view-change", "sort-change"]);

// 切换视图模式
const handleViewChange = (mode) => {
    viewMode.value = mode;
    emit("view-change", mode);
};

// 切换排序方式
const handleSortChange = (type) => {
    sortType.value = type;
    emit("sort-change", type);
};
</script>

<template>
    <el-card class="view-card">
        <el-row>
            <el-col :xs="24" :sm="12" :md="12" :lg="12">
                <div class="view-info">
                    <h3>
                        校园招聘活动 <el-tag type="info">共 {{ totalCount }} 场</el-tag>
                    </h3>
                </div>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" class="action-col">
                <el-radio-group v-model="viewMode" size="small" @change="handleViewChange">
                    <el-radio-button label="list">
                        <el-icon><List /></el-icon> 列表视图
                    </el-radio-button>
                    <el-radio-button label="calendar">
                        <el-icon><Calendar /></el-icon> 日历视图
                    </el-radio-button>
                </el-radio-group>

                <el-dropdown @command="handleSortChange" style="margin-left: 10px">
                    <el-button type="info" plain size="small">
                        {{ sortOptions[sortType] }}
                        <el-icon class="el-icon--right"><ArrowDown /></el-icon>
                    </el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="(label, value) in sortOptions" :key="value" :command="value">
                                {{ label }}
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-col>
        </el-row>
    </el-card>
</template>

<style scoped>
.view-card {
    margin-bottom: 20px;
    border-radius: 12px;
    padding: 16px 20px;
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    background: linear-gradient(to right, #ffffff, #f9fbfd);
}

.view-info h3 {
    font-size: 18px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #303133;
    font-weight: 600;
}

.action-col {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

/* 优化单选按钮组 */
:deep(.el-radio-group) {
    display: flex;
    align-items: center;
}

:deep(.el-radio-button__inner) {
    padding: 8px 16px;
    height: 36px;
    line-height: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    border-radius: 0;
    transition: all 0.3s;
}

:deep(.el-radio-button:first-child .el-radio-button__inner) {
    border-radius: 8px 0 0 8px;
}

:deep(.el-radio-button:last-child .el-radio-button__inner) {
    border-radius: 0 8px 8px 0;
}

:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
    box-shadow: -1px 0 0 0 var(--el-color-primary);
}

/* 优化下拉按钮 */
:deep(.el-dropdown) {
    display: flex;
    align-items: center;
}

:deep(.el-button--info.is-plain) {
    border-color: #e0e0e0;
    color: #606266;
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
}

:deep(.el-button--info.is-plain:hover) {
    border-color: var(--el-color-primary);
    color: var(--el-color-primary);
    background-color: #ecf5ff;
}

:deep(.el-tag) {
    margin-left: 8px;
    border-radius: 4px;
    font-weight: 400;
    font-size: 12px;
    background-color: #f0f2f5;
    border: none;
    padding: 0 8px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .action-col {
        justify-content: flex-start;
        margin-top: 15px;
    }
}
</style>
